<!-- 开票记录 -->
<template>
  <div class="invoice-record-wrap flx-column">
    <el-button class="position-btn" type="primary" @click="openInvoicingDrawer">申请开票</el-button>

    <div class="flx money-total">
      <div class="item">
        <div class="label">总合同金额(元)</div>
        <div class="text-primary">103600.00</div>
      </div>
      <div class="item">
        <div class="label">总开票金额(元)</div>
        <div class="text-primary">3600.00</div>
      </div>
      <div class="item">
        <div class="label">专票金额(元)</div>
        <div class="text-warning">3600.00</div>
      </div>
      <div class="item">
        <div class="label">普票金额(元)</div>
        <div class="text-warning">3600.00</div>
      </div>
      <div class="item">
        <div class="label">未开票金额(元)</div>
        <div class="text-red">3600.00</div>
      </div>
    </div>

    <div class="flx-1">
      <ProTable ref="proTable" :columns="columns" :toolButton="false" :requestApi="getList">
        <!-- 选择申请时间 -->
        <template #applicationTimeHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickApplicationTime"><Calendar /></el-icon>
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="timePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 开票状态 -->
        <template #invoicingStatus>
          <el-tag type="primary">开票中</el-tag>
          <!-- <el-tag type="success">已开票</el-tag>
              <el-tag type="danger">已开票</el-tag> -->
        </template>

        <!-- 操作 -->
        <template #operation="{ row }">
          <el-button link type="primary" @click="openDetailDrawer(row)">详情</el-button>
          <el-button link type="primary" @click="download(row)">下载</el-button>
        </template>
      </ProTable>
    </div>
  </div>

  <!-- 申请开票 -->
  <apply-invoicing v-if="showInvoicing" ref="applyInvoicingRef" @close="showInvoicing = false"></apply-invoicing>

  <!-- 发票详情 -->
  <invoicing-detail v-if="showInvoicingDetail" ref="invoicingDetailRef" @close="showInvoicingDetail = false"></invoicing-detail>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ApplyInvoicing from "./components/ApplyInvoicing.vue";
import InvoicingDetail from "./components/Detail.vue";

// 获取申请人类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// 表格配置项
const columns = reactive([
  {
    prop: "contractName",
    columnKey: "contractName",
    label: "合同名称",
    width: 101,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "company",
    columnKey: "type",
    label: "公司/抬头名称",
    minWidth: 120
  },
  {
    prop: "iDNumber",
    label: "公司税号/身份证号",
    minWidth: 142
  },
  {
    prop: "invoiceType",
    label: "发票类型",
    minWidth: 105,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "amount",
    label: "金额(元)",
    minWidth: 101,
    sortable: "custom"
  },
  {
    prop: "applicationTime",
    label: "申请时间",
    minWidth: 144,
    sortable: "custom"
  },
  {
    prop: "collectionAccount",
    label: "收款账户",
    minWidth: 106,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "invoicingStatus",
    label: "开票状态",
    minWidth: 95
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 100,
    fixed: "right"
  }
]);

// @@@
const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [{}]
      }
    });
  });
};
// @@@

// 选择申请时间
const times = ref([]);
const timePick = ref();
const handleClickApplicationTime = () => {
  timePick.value.focus();
};
const timeChange = () => {
  console.log(times.value);
};

const openCreateDrawer = () => {
  console.log("openCreateDrawer");
};

// 申请开票
const applyInvoicingRef = ref();
const showInvoicing = ref(false);
const openInvoicingDrawer = row => {
  showInvoicing.value = true;
  nextTick(() => {
    applyInvoicingRef.value.acceptParams({
      title: "申请开票",
      id: row.id
    });
  });
};

// 发票详情
const showInvoicingDetail = ref(false);
const invoicingDetailRef = ref();
const openDetailDrawer = row => {
  showInvoicingDetail.value = true;
  nextTick(() => {
    console.log(invoicingDetailRef);
    invoicingDetailRef.value.acceptParams({
      id: row.id
    });
  });
};
</script>

<style lang="scss" scoped>
.invoice-record-wrap {
  .money-total {
    padding-bottom: 8px;
    .item {
      margin-right: 32px;
      line-height: 22px;
      .label {
        color: #909399;
      }
    }
  }
  .position-btn {
    position: absolute;
    right: 0;
    top: 0px;
  }
}
</style>
